import React from 'react';

import {Action, ActionSheet} from './Action';

import avatar from './assets/avatar.png';

export class PostItem extends React.Component {
  render() {
    return (
      <a href="javascript:void(0);" className="weui_media_box weui_media_appmsg">
        <div className="weui_media_bd">
          <div className="weui_media_box weui_media_text">
            <p className="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
            <ul className="weui_media_info" style={{lineHeight: '25px'}}>
              <li className="weui_media_info_meta">
                <img src={avatar}/>
              </li>
              <li className="weui_media_info_meta">
                文字来源
              </li>
              <li className="weui_media_info_meta">时间</li>
              <li className="weui_media_info_meta weui_media_info_meta_extra">其它信息</li>
            </ul>
          </div>
        </div>
        <div className="weui_media_hd">
          <img className="weui_media_appmsg_thumb"
               src=""/>
        </div>
      </a>
    )
  }
}

export default class PostContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openAction: false
    };
  }

  render() {
    return (
      <div className="panel">
        <div className="hd">
          <h1 className="page_title">Panel</h1>
        </div>
        <div className="bd">
          <div className="weui_panel weui_panel_access">
            <div className="weui_panel_hd">图文组合列表</div>
            <div className="weui_panel_bd">
              <PostItem/>
              <PostItem/>
              <PostItem/>
            </div>
            <a className="weui_panel_ft" onClick={()=>this.setState({openAction: true})}>查看更多</a>
          </div>
          <ActionSheet onCancel={()=>this.setState({openAction: false})} open={this.state.openAction}>
            <Action>选项1</Action>
            <Action>选项2</Action>
            <Action>选项3</Action>
          </ActionSheet>
        </div>
      </div>
    )
  }
}